<template>
    <div class="class-continer">
      <div class="class-head">
        <img src="../../assets/img/c1.png" alt="">
        <span>分类</span>
        <img src="../../assets/img/c2.png" alt="">
      </div>
      <div class="class-con">
        <div class="class-con-left" ref="left">
        <ul>
          <li v-for="(item,index) in classArr" :key="index" @click="rightHeight(index)" :class="numactive=== index?'active':''">{{item.left}}</li>
        </ul>
        </div>
       <div class="right-q" ref="right">
         <div class="class-con-right">
           <div class="class-right-list" v-for="(item,index) in classArr" :key="index">
             <div v-for="(i,index) in item.info" :key="index">
               <div class="class-lists">
                 <img :src="i.title_img" alt="">
               </div>
               <div class="class-b">
                 <div class="class-c">
                   <div class="class-pa"></div>
                   <div class="class-pb"></div>
                   <p>{{i.title}}</p>
                 </div>
                 <div class="class-d">
                   <div class="class-e" v-for="(a,index) in i.list " :key="index">
                     <p><img :src="a.img" alt=""></p>
                     <p>{{a.name}}</p>
                   </div>
                 </div>
               </div>
               <div class="class-end"></div>
             </div>
           </div>
         </div>
       </div>
      </div>
    </div>
</template>

<script>
import { fenlist } from '../../api/index'
import BetterScroll from 'better-scroll'
export default {
  name: 'lists',
  data () {
    return {
      classArr: [],
      scrollLeft: null,
      scrollRight: null,
      scrolltopsright: 0,
      topArr: [],
      num: 0
    }
  },
  methods: {
    // 分类数据
    gethomeGoods () {
      fenlist().then(res => {
        console.log(res)
        this.classArr = res
      })
    },
    // 格式化
    _initscroll () {
      this.scrollLeft = new BetterScroll(this.$refs.left, {
        click: true
      })
      this.scrollRight = new BetterScroll(this.$refs.right, {
        probeType: 3
      })
      this.scrollRight.on('scroll', (position) => {
        this.scrolltopsright = Math.abs(position.y)
      })
    },
    // 存储右边的每个div位置
    _intop () {
      const tops = []
      var cc = 0
      tops.push(cc)
      const divs = document.querySelectorAll('.class-right-list')
      for (var i = 0; i < divs.length; i++) {
        if (i === divs.length - 1) {
          divs[i].style.paddingBottom = (window.innerHeight - 387) + 'px'
          this.scrollRight.refresh()
        }
        cc += divs[i].clientHeight
        tops.push(cc)
      }
      this.topArr = tops
    },
    // 右边滚动左边跟随
    leftscroll (index) {
      const leftlis = this.$refs.left.querySelectorAll('li')
      // console.log(leftlis)
      const li = leftlis[index]
      this.scrollLeft.scrollToElement(li, 300)
    },
    // 点击左边右边跟随
    rightHeight (n) {
      this.scrollRight.scrollTo(0, -this.topArr[n], 300)
    }
  },
  computed: {
    numactive () {
      let n = 0
      for (var i = 0; i < this.topArr.length; i++) {
        if (this.topArr[i] <= this.scrolltopsright && this.scrolltopsright < this.topArr[i + 1]) {
          n = i
          // 给左侧移动一个参数（下标）
          this.leftscroll(i)
          break
        }
      }
      return n
    }
  },
  watch: {
    // 如果请求回来数据再格式化
    classArr (newval) {
      if (newval.length) {
        this.$nextTick(function () {
          // 格式化
          this._initscroll()
          this._intop()
        })
      }
    }
  },
  created () {
    this.gethomeGoods()
  }
}
</script>

<style scoped lang="less">
  /*.class-continer{*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  background: white;*/
  /*}*/
.class-head{
  width: 100%;
  height: 0.89rem;
  background: #F2F2F2;
  position: fixed;
  z-index: 100;
  padding: 0 0.34rem 0 0.34rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img{
    width: 0.3rem;
    height: 0.3rem;
  }
  span{
    font-size: 0.3rem;
  }
}
  .class-con{
    width: 100%;
    height: 9.7rem;
    padding-top:1rem ;
    position: fixed;
    display: flex;
    .class-con-left{
      width: 20%;
      background: white;
      li{
        width: 100%;
        height: 0.87rem;
        text-align: center;
        line-height: 0.87rem;
        font-size: 0.33rem;
      }
    }
    .right-q{
      width: 80%;
      background: white;
    }
    .class-con-right{
      .class-right-list{
        width: 100%;
        padding: 0.4rem 0.3rem 0 0.3rem ;
        box-sizing: border-box;
      }
    }
  }
  .class-lists{
    width: 100%;
    height: 1.51rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .class-b{
    width: 100%;
    height: 3.8rem;
  }
  .class-c{
    width: 100%;
    height: 0.72rem;
    background: #FFFFFF;
    text-align: center;
    line-height: 0.72rem;
    position: relative;
  }
  .class-pa{
    width: 0.3rem;
    height: 0.01rem;
    background: #dddddd;
    position: absolute;
    left: 85px;
    top: 19px;
  }
  .class-pb{
    width: 0.3rem;
    height: 0.01rem;
    background: #dddddd;
    position: absolute;
    right: 85px;
    top: 19px;
  }
  .class-d{
    width: 100%;
    height: 3.33rem;
    display: flex;
    flex-wrap: wrap;
  }
  .class-e{
    width: 33%;
    height: 1.29rem;
    p{
      text-align: center;
    }
    img{
      width: 0.7rem;
      height: 0.8rem;
    }
  }
  .class-end{
    width: 100%;
    height: 0.67rem;
    background: url("../../assets/img/c3.png") no-repeat;
    background-size: 100% 100%;
  }
  .active{
    border-left: 3px solid #ee0022;
    color:#ee0022 ;
  }
</style>
